
<template>

    <div id="box">
        <div class="box-head">
            <span class="h-span">商城客服</span>
        </div>
        <div class="box-body" id="box-body">
            <div class="rotWord" id="rotWord" >
                <span></span>
                <p>helo 撸码突击队！</p>
            </div>
        </div>
        <div class="box-footer">
            <input type="text" id="input" autocomplete="off">
            <el-button  type="primary" style="width: 100px ;height: 60px" v-on:click="getdata">发送</el-button>
        </div>
    </div>
</template>


<script>
    export default {
        name: "kefu",
        data(){
          return{
              list:""
          }
        },
        methods:{
            getdata(){
                console.log("avc")
                var text=document.getElementById("input").value
                console.log(text)
                //http://www.tuling123.com/openapi
                this.$axios
                    .post("http://www.tuling123.com/openapi/api?key=d73b4083c2d04c55a201c32454557646&info="+text,
                ).then(res=>{
                    console.log(res)
                    this.list = res.data.text
                    // var box =  document.getElementsByClassName("box-body")
                    //  document.getElementById("box-body").innerHTML+="<div style='  margin-top: 30px'><span style='  width: 40px;  height: 40px; background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=47106712,1636322560&fm=27&gp=0.jpg); background-size:cover;  background-position:center;; border-radius:20px;' ></span><p  style='margin-top: 30px;padding: 10px; background: #00ffae; margin-left: 10px;  border-radius: 8px;  word-break: break-all;max-width: 220px;' > " + this.list + "</p></div>"
                    // document.getElementById("box-body").innerHTML+="<div style='  margin-top: 30px'><span style='  width: 40px;  height: 40px; background: url(https://pic.baike.soso.com/ugc/baikepic2/1714/20200529164644-380151228_jpeg_1280_1087_150206.jpg/300);  background-size:cover;  background-position:center; float: right; border-radius:20px;'></span><p  style='float: right;padding: 10px; background: #00ffae; margin-left: 10px;  border-radius: 8px;  word-break: break-all;max-width: 220px;' > " + text + "</p></div>"
// document.getElementById("box-body").innerHTML+="<div></div>"
                    document.getElementById("box-body").innerHTML+="<div style='  margin-top: 30px'><span style='  width: 40px;  height: 40px; background: url(https://pic.baike.soso.com/ugc/baikepic2/1714/20200529164644-380151228_jpeg_1280_1087_150206.jpg/300);  background-size:cover;  background-position:center; float: right; border-radius:20px;'></span><p  style='float: right;padding: 10px; background: #00ffae; margin-left: 50px;  border-radius: 8px;  word-break: break-all;max-width: 220px;' > " + text + "</p></div>"
                    document.getElementById("box-body").innerHTML+="<div style=' overflow: hidden; margin-top: 30px' ><span style='  width: 40px; height: 40px;   background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=47106712,1636322560&fm=27&gp=0.jpg);   background-size:cover; background-position:center; float: left ; border-radius:20px;' ></span><p  style='margin-top: 30px;  padding: 10px; background: #00ffae; margin-left: 35px;  border-radius: 8px;  word-break: break-all;max-width: 220px; display: block;' > " + this.list + "</p></div>"
                    //document.getElementById("box-body").innerHTML+="<div style='  margin-top: 30px'><span style='  width: 40px;  height: 40px; background: url(https://pic.baike.soso.com/ugc/baikepic2/1714/20200529164644-380151228_jpeg_1280_1087_150206.jpg/300);  background-size:cover;  background-position:center; float: right; border-radius:20px;'></span><p  style='float: right;padding: 10px; background: #00ffae; margin-left: 10px;  border-radius: 8px;  word-break: break-all;max-width: 220px;' > " + text + "</p></div>"
               })
                text.value=''
            }
        }
    }

</script>


<style scoped>
    * {margin: 0;padding: 0;}
    body, html {width: 100%;height: 100%;}
    body {
        /*background: url(http://pic1.win4000.com/wallpaper/e/58e6f381091d5.jpg) no-repeat;*/
        background-size:cover;
        background-position:center;
    }
    #box {
        border: 1px solid #ff7373;
        width: 800px;
        height: 600px;
        background: rgba(255, 255, 255, .5);
        margin:0 auto;
        position: relative;
        top:16%;
    }

    #box .box-head {
        height: 60px;
        background: #00ffac;
    }

    .box-head .h-span {
        color: #fff;
        line-height: 60px;
        font-size: 24px;
        float: left;
        margin-left: 20px;
    }

    #box .box-body {
        width: 760px;
        height: 420px;
        padding: 20px;
        overflow: auto;
    }

    /*overflow:auto;div内文本超出后设置滚动条*/

    /*手动设置滚动条样式*/
    .box-body::-webkit-scrollbar {
        width: 4px;
    }



    .box-body::-webkit-scrollbar-track {
        background: #808080;
        border-radius: 2em;
    }

    .box-body::-webkit-scrollbar-thumb {
        background-color: #03a9f4;
        border-radius: 2em;
    }




    /*自定义滚动条的样式*/
    /*机器人的css*/
    .box-body .rotWord span {
        width: 40px;
        height: 40px;
        background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=47106712,1636322560&fm=27&gp=0.jpg);
        background-size:cover;
        background-position:center;
        float: left;
        border-radius:20px;
    }

    .box-body .rotWord p {
        float: left;
            padding: 10px;
        background: #00ffae;
        margin-left: 10px;
        border-radius: 8px;
        word-break: break-all;
        max-width: 220px;
    }

    /*word-break:break-all;max-width:220px; 文本p自动换行*/
    .rotWord {
        overflow: hidden;
    }
    /*清楚浮动*/
    /*myself的css*/
    .box-body .myWord span {
        width: 40px;
        height: 40px;
        background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=523248224,3147732123&fm=27&gp=0.jpg);
        background-size:cover;
        background-position:center;
        float: right;
        border-radius:20px;
    }

    .box-body .myWord p {
        float: right;
        padding: 10px;
        background: #00ff00;
        margin-right: 10px;
        border-radius: 8px;
        word-break: break-all;
        max-width: 220px;
    } /*word-break:break-all;max-width:220px; 文本p自动换行*/
    .myWord {
        overflow: hidden;
        margin: 4px 0;
    }
    /*清楚浮动*/
    #box .box-footer {
        width: 760px;
        height: 60px;
        padding: 0 20px;
    }

    .box-footer #input {
        width: 620px;
        height: 60px;
        background: rgba(0, 0, 0, .1);
        border-radius: 8px;
        text-indent: 10px;
        color: #fff;
        float: left;
        font-size: 18px;
        padding-left: 20px;
        outline: none;
        overflow: hidden;
        border: none;
    }

    .box-footer #btn {
        width: 100px;
        height: 60px;
        color:#fff;
        background: rgba(0, 164, 205, 0.6);
        border-radius: 8px;
        user-select: none;
        text-align: center;
        text-align: center;
        line-height: 60px;
        float: right;
        font-size: 18px;
        cursor: pointer;
    }
</style>